<script setup lang="ts">
import { ref, reactive, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import MyLogin from '../Login/MyLogin.vue';
import { useInfo } from '@/stores/counter';
import { storeToRefs } from 'pinia';
const counterStore = useInfo();
const { user }:any = storeToRefs(counterStore);

const prpos = defineProps(['LogClick', 'LogType', 'IsLoginShow', 'loginlist', 'registration', 'imgs', 'imglist', '']);
const router = useRouter();

const professional = (type: any) => {
  if (type === '工作台') {
    router.push('/goods');
  }
};
</script>

<template>
  <div class="but-box">
    <el-button class="but" type="primary" style="background: #1261ff;" @click="LogClick('登录')"
      v-if="!user.username">登录</el-button>
    <el-button class="but" @click="LogClick('注册')" v-if="!user.username">注册</el-button>
    <MyLogin v-if="IsLoginShow" :LogType="LogType" @LogClick="LogClick"></MyLogin>
    <el-button v-if="!!user.username" type="white" class="professional" @click="professional('工作台')">工作台</el-button>
    <svg-icon v-if="!!user.username" :name="'用户头像'" class="imgs" @mouseover="imgs()" width="35px"
      height="35px"></svg-icon>
  </div>
</template>

<style scoped>
.but {
  display: flex
}

.imgs {
  position: relative;
  float: right;
}
.but-box{
  display: flex;
}
.professional {
  display: inline-block;
  margin-right: 30px;
}

.professional:hover {
  background-color: rgb(18, 97, 255);
  color: #fff;
}
</style>